<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
    <base href="<%=basePath%>">
    <title>角色管理</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/style/layui/css/layui.css" >
    <script src="${pageContext.request.contextPath}/style/layui/layui.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/style/jquery-2.1.0.js"></script>
</head>
<body>

<%--表格--%>
<table class="layui-hide" id="test" lay-filter="test"></table>

<!--对于表头的操作-->
<script id="toolbarDemo" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addRole">添加角色</button>
        <button class="layui-btn layui-btn-sm" lay-event="delBatch">批量删除</button>
    </div>
</script>

<!--对于每行的操作-->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<!--添加或者修改的弹出层start-->
<div style="display: none;padding: 20px;" id="saveOrUpdateDiv">
    <form class="layui-form" action="" id="dataFrm">
        <div class="layui-form-item"  id="fid">
            <label class="layui-form-label">id</label>
            <div class="layui-input-block">
                <input id="id" type="text" name="id" required readonly  autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色名称</label>
            <div class="layui-input-block">
                <input type="text" id="name" name="name" required lay-verify="required|nameCheck"
                       placeholder="请输入角色名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<%--                <button type="reset" class="layui-btn layui-btn-primary">重置</button>--%>
            </div>
        </div>

    </form>
</div>
<!--添加或者修改的弹出层end-->

<script>
    layui.use(['jquery', 'table', 'layer', 'form'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;

        //监听行工具事件  test  表格的id
        //展示全部
        table.render({
            elem: '#test' //id为test的table
            , url: '${pageContext.request.contextPath}/role'   //url 查询数据   所有的客户的数据
            , title: '角色表'
            , toolbar: "#toolbarDemo"   //表格的工具条
            , height: 'full-100'
            , cellMinWidth: 100 //设置列的最小默认宽度
            , page: true  //是否启用分页
            , limit: 5 //设置每页显示条数 默认为10
            , limits: [5, 10, 15]
            , text: {
                none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
            }
            , done: function (res) {
                console.log(res.data);
            }
            , cols: [[
                {type: 'checkbox', fixed: 'left'}//复选框
                , {field: 'id', title: 'ID', sort: true}
                , {field: 'name', title: '用户名'}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
            ]]
        });

        //头工具栏事件
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'addRole':
                    addRole();
                    break;
               <%--case 'delBatch':--%>
               <%--     var data = checkStatus.data;--%>
               <%--     if (data.length == 0) {--%>
               <%--         layer.msg("必须选中才可以删除!");--%>
               <%--         return;}--%>
               <%--     var id = "";--%>
               <%--     if (data.length > 0) {--%>
               <%--         for (var i = 0; i < data.length; i++) {--%>
               <%--             id += data[i].id + ',';}}--%>
               <%--     id = id.substring(0, id.length - 1);--%>
               <%--     delBatch(id);--%>
               <%--     tableIns.reload({url: '${pageContext.request.contextPath}/role?state=allFloors'});--%>
               <%--     break;--%>
            };
        });


        //删除
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    layer.close(index);
                    var id = data.id;
                    $.ajax({
                        url: "${pageContext.request.contextPath}/role?state=doDel",
                        type: 'post',
                        data: {'id': id},
                        dataType: "json",
                        success: function (d) {
                            if (d.data == 1) {
                                layer.msg('删除成功！');
                                window.location.href = "${pageContext.request.contextPath}/view/backstage/role.jsp";
                            } else {
                                layer.msg('删除失败！');
                            }
                        }
                    });
                });
            } else if (obj.event === 'edit') {
                //打开修改页面
                openUpdateUser(data);
            }
        });

        var mainindex;
        //添加方法
        function addRole() {
            mainindex = layer.open({
                type:1,
                title:"添加角色",
                content:$("#saveOrUpdateDiv"),
                area:['400px','200px'],
                success:function(index){
                    $("#fid").hide();
                    $("#dataFrm")[0].reset();
                    form.on("submit(formDemo)",function(){
                        layer.msg("正在提交");
                        $.ajax({
                            url:"${pageContext.request.contextPath}/role?state=doAdd",
                            data:$("#dataFrm").serialize(),
                            dataType:"json",
                            type:"post",
                            success:function(data){
                                if(data.data == 1){
                                    layer.msg("添加成功！");
                                    window.location.href = "${pageContext.request.contextPath}/view/backstage/role.jsp";
                                }else{
                                    layer.msg("添加失败！")
                                }
                            },
                            error:function(msg){
                                alert(msg);}
                        });
                        return false;
                    });
                }

            });
        }

        //打开修改页面
        function openUpdateUser(data) {
            mainIndex = layer.open({
                type: 1,
                title: '修改角色',
                content: $("#saveOrUpdateDiv"),
                area: ['400px', '300px'],
                success: function (index) {
                    $("#id").val(data.id);
                    form.on("submit(formDemo)", function () {
                        $.ajax({
                            url: "${pageContext.request.contextPath}/role?state=doUpdate",
                            data: $("#dataFrm").serialize(),
                            dataType: "json",
                            type: "post",
                            success: function (data) {
                                if (data.data == 1) {
                                    layer.msg("修改成功！");
                                    window.location.href = "${pageContext.request.contextPath}/view/backstage/role.jsp";
                                } else {layer.msg("修改失败！")}
                            }
                        });
                        return false;
                    });
                }
            });
        }

    });
</script>

</body>
</html>
